import type { IMaterialListParams } from '@/api/marterial';
import { Button, Flex, Form, Input } from 'antd';
import { memo } from 'react';

export type SearchFormValues = Pick<IMaterialListParams, 'titleKey' | 'tagKey'>;

// 搜索表单
const SearchForm: React.FC<{
	onSearch: (values: SearchFormValues) => void;
	children?: React.ReactNode;
    className?: string;
}> = ({ onSearch, children, className }) => {
	const [form] = Form.useForm();
	const onFinish = (values: SearchFormValues) => {
		onSearch(values);
	};
	const onReset = () => {
		form.resetFields();
		onSearch({ titleKey: undefined, tagKey: undefined });
	};
	return (
		<div className={`flex justify-between items-center mb-20 ${className}`}>
			{children}
			<Form name="searchForm" onFinish={onFinish} form={form} layout="inline" autoComplete="off">
				<Form.Item name="titleKey" label="标题">
					<Input placeholder="请输入标题" />
				</Form.Item>
				<Form.Item name="tagKey" label="标签">
					<Input placeholder="请输入标签" />
				</Form.Item>
				<Form.Item>
					<Flex gap="small">
						<Button onClick={onReset}>重置</Button>
						<Button type="primary" htmlType="submit">
							搜索
						</Button>
					</Flex>
				</Form.Item>
			</Form>
		</div>
	);
};

export default memo(SearchForm);
